import React, { useState } from 'react';
import { Form, Row, Col, Input } from 'antd';
// 基础信息
const BaseInfoSection = ({ form }) => {
  const [templateNameError, setTemplateNameError] = useState('');
  const [versionError, setVersionError] = useState('');

  const handleTemplateNameChange = (e) => {
    const value = e.target.value;
    if (value.length > 20) {
      setTemplateNameError('限制输入2-20个字');
    } else if (value.length > 0 && value.length < 2) {
      setTemplateNameError('限制输入2-20个字');
    } else {
      setTemplateNameError('');
    }
  };

  const handleVersionChange = (e) => {
    const value = e.target.value;
    if (value.length > 30) {
      setVersionError('限制输入2-30个字');
    } else if (value.length > 0 && value.length < 2) {
      setVersionError('限制输入2-30个字');
    } else {
      setVersionError('');
    }
  };

  return (
    <div className="section">
      <h3 className="section-title">基础信息</h3>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            label="模板名称"
            name="templateName"
            rules={[{ required: true, message: '请输入模板名称' }]}
          >
            <Input
              placeholder="请输入模板名称，最多不超过20字"
              maxLength={20}
              onChange={handleTemplateNameChange}
            />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item label="模板描述" name="templateDescription">
            <Input placeholder="请输入模板描述，最多不超过100字" maxLength={100} />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            label="版本"
            name="version"
            rules={[{ required: true, message: '请输入版本号' }]}
            validateStatus={versionError ? 'error' : ''}
            help={versionError}
          >
            <Input placeholder="建议值为10.0" maxLength={30} onChange={handleVersionChange} />
          </Form.Item>
        </Col>
      </Row>
    </div>
  );
};

export default BaseInfoSection;